<template>
    <div class="app_data">
        <div class="title_data">
            <h2>数据概览</h2>
        </div>
        <div class="query-c">
            <Form inline>
                <FormItem prop="user">
                    <Select v-model="pageInfo.city" style="width:200px" placeholder="请选择城市" @on-change="cityChange()">
                        <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                    </Select>
                </FormItem>
                <FormItem>
                    <Select v-model="pageInfo.division" style="width:200px" placeholder="请选择市区">
                        <Option v-for="item in divisionList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                    </Select>
                </FormItem>
                <FormItem>
                    <Select v-model="pageInfo.rent_mode" style="width:200px" placeholder="请选择租赁方式">
                        <Option v-for="item in rentModeList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                    </Select>
                </FormItem>
                <FormItem>
                    <Select v-model="pageInfo.size" style="width:200px" placeholder="请选择面积范围">
                        <Option v-for="item in sizeList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                    </Select>
                </FormItem>
                <FormItem>
                    <Select v-model="pageInfo.orientation" style="width:200px" placeholder="请选择朝向">
                        <Option v-for="item in orientationList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                    </Select>
                </FormItem>
                <FormItem>
                    <Button type="primary" @click="handleSubmit('formInline')">搜索</Button>
                </FormItem>
            </Form>
        </div>
        <div class="update">
            <Table border :columns="columns1" :data="data1">
                <template #caozuo="{ row, index }">
                    <Button type="primary" size="small" style="margin-right: 5px" @click="openInfo('https://cm.lianjia.com' + row.link)">详情
                    </Button>
                </template>
            </Table>
            <div class="page">
                <Page :total=pageInfo.total @on-change="ChangePage" show-total/>
            </div>
        </div>

    </div>
</template>
<script>
import {getdatas, getDict, getDivisionList , getOrientationList} from "../api";

export default {
    data() {
        return {
            pageInfo: {
                pageNo: 1,
                pageSize: 10,
                total: 0,
                city: '',
                rent_mode:'',
                orientation:'',
                division:'',
                size:'',
            },
            columns1: [
                {
                    title: '城市',
                    key: 'city_name',
                    align: 'center',
                    width: '100',
                },
                {
                    title: '详细地址',
                    key: '',
                    align: 'center',
                    render: (h, params) => {
                        return h('div', [params.row.division +'-'+ params.row.localtion +'-'+ params.row.block]);
                    }
                },
                {
                    title: '租赁方式',
                    align: 'center',
                    width: '100',
                    key: 'rent_mode'
                },
                {
                    title: '朝向',
                    align: 'center',
                    width: '100',
                    key: 'orientation'
                },
                {
                    title: '每月租金',
                    key: 'rent',
                    align: 'center',
                    width: '100'
                },
                {
                    title: '房屋面积',
                    key: 'size',
                    align: 'center',
                    width: 100
                },
                {
                    title: '格局',
                    key: 'house_type',
                    align: 'center',
                    width: 140
                },
                {
                    title: '标签',
                    key: 'tags',
                    align: 'center',
                    render: (h, params) => {
                        return h('Tag', [params.row.tags]);
                    }
                },
                {
                    title: '操作',
                    slot: 'caozuo',
                    align: 'center',
                    width: 100
                },

            ],
            data1: [],
            cityList: [],
            rentModeList : [
                {label:'整租',value:'整租'},
                {label:'合租',value:'合租'}
            ],
            orientationList : [],
            sizeList:[
                {value:'0',label:'小于50㎡'},
                {value:'1',label:'50㎡-90㎡'},
                {value:'2',label:'90㎡-120㎡'},
                {value:'3',label:'大于120㎡'}
            ],
            divisionList:[]
        }
    },
    mounted() {
        this.init()
        this.getDict()
        this.getOrientationList()
        this.cityChange()
    },
    methods: {
        async cityChange() {
            this.divisionList = []
            const res = await getDivisionList(`city_code=${this.pageInfo.city}`)
            this.divisionList = res.info
        },
        async getOrientationList() {
            const res = await getOrientationList()
            res.info.forEach(item => {
                const orientation = {}
                orientation.value = item.value
                orientation.label = item.name
                this.orientationList.push(orientation)
            })
        },
        async getDict() {
            const res = await getDict()
            res.info.forEach(item => {
                const city = {}
                city.value = item.city_code
                city.label = item.city_name
                this.cityList.push(city)
            })
        },
        handleSubmit() {
            this.init()
        },
        async getDict() {
            const res = await getDict()
            res.info.forEach(item => {
                const city = {}
                city.value = item.city_code
                city.label = item.city_name
                this.cityList.push(city)
            })
        },
        async init() {
            const res = await getdatas(this.pageInfo);
            this.pageInfo.total = res.total
            this.pageInfo.pageNo = res.pageno
            this.pageInfo.pageSize = res.pagesize
            this.data1 = res.info
        },
        ChangePage(e) {
            this.pageInfo.pageNo = e
            this.init()
        },
        openInfo(e) {
            window.open(e)
        }
    }
}
</script>
<style>
.app_data {
    width: 100%;
    height: 100%;
    background: #ffffff;
    padding: 0 200px;
    font-family: "Open Sans", sans-serif;
    color: #444;
}

.title_data {
    margin: 4px auto;
    padding: 15px;
    text-align: center;
}

.title_data h2 {
    font-size: 32px;
    font-weight: 600;
    margin-bottom: 20px;
    padding-bottom: 0;
    color: #5c768d;
}

.title_data span {
    font-size: 16px;
    color: #444;
    font-family: "Open Sans", sans-serif;
}

.update {
    background: #f5f9fc;
}

.page {
    text-align: center;
    padding: 10px;
}

.query-c {
    margin: 0 0 -12px 0;
}
</style>
